<template>
  <div class="home">
   <!-- 首页顶部 -->
   <div class="m-topbar">
    <SvgIcon class="icon" iconName="music"/>
    <h1 class="title">music</h1>
   </div>
   <!-- 选项卡切换 -->
   <div class="m-tab-con">
         <!-- 选项卡的标题 -->
      <nav class="m-tab-header">
        <router-link :to="{name: 'recommend'}">推荐</router-link>
        <router-link :to="{name: 'singer'}">歌手</router-link>
        <router-link :to="{name: 'ranking'}">排行</router-link>
        <router-link :to="{name: 'search'}">搜索</router-link>
      </nav>
      <!-- 选项卡内容区域(子路由组件) -->
      <div class="m-tab-panel">
        <router-view/>
      </div>
   </div>
  </div>
</template>

<script setup>

</script>
<style lang="less" scoped>
// @import '@/styles/variables.less';
.home{
  .m-topbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    width: 100%;
    height: 44px;
    justify-content: center;
    align-items: center;
    color: @light-color;
    background-image: linear-gradient(@topbar-gradient 10%, @main-background);
    .icon{
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    .title{
      font-size: @font-size-oversized;
    }
  }
  .m-tab-con{
   position: relative;
  .m-tab-header {
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    z-index: 199;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 44px;
    line-height: 30px;
    background-color: @main-background;
    a {
      border-bottom: 2px solid transparent;
      color: @dark-color;
      &.router-link-active {
        color: @light-color;
        border-bottom: 2px solid @light-color;
      }
    }
  }
  .m-tab-panel {
    width: 100%;
    padding-top: 88px;
  }
  }
}
</style>
